<template>

    <view>
        <view class="content-header">
            <!-- <view class="title-name">
                请选择收货地址
            </view> -->

            <uni-forms :modelValue="formData">
                <view class="input-wrapper">
                    <view class="title-text"> 姓名 </view><input id="uni-input-type-text" class="uni-input" type="text"
                        v-model="addressData.name" placeholder="请输入收货人姓名" />
                </view>
                <view class="input-wrapper">
                    <view class="title-text" style="position: relative;">
                        <text @click="select">电话 +86</text>
                        <view class="select"><u-icon name="arrow-down-fill" color="#372928" size="15"></u-icon></view>
                    </view><input id="uni-input-type-text" class="uni-input" type="text" v-model="addressData.phone"
                        placeholder="请输入收货人手机号" />
                </view>
                <!-- <view class="input-wrapper">
                    <view class="title-text"> 所在地区 </view><input id="uni-input-type-text" v-model="addressData.address"
                        class="uni-input" type="text" placeholder="选择所在省/市/区" />
                </view> -->

                <!-- <up-picker :show="show1" ref="uPickerRef" :columns="columns" @confirm="confirm" @change="changeHandler"></up-picker> -->

                <!-- <view class="row">
                  <view class="nominal">所在地区</view>
                  <view class="input selectcity" @tap="openPicker">
                    <input
                      placeholder="请选择省市区"
                      disabled
                      type="text"
                      v-model="addressData.address"
                    />
                    <image src="/static/right.png" class="rights"></image>
                  </view>
                </view> -->

                <!-- //所在地区 -->
                <!-- <view class="input-wrapper">
                                  <view class="title-text">所在地区</view>
                                  <view class="input selectcity" @tap="openPicker">
                                    <input id="uni-input-type-text" v-model="addressData.address"
                                        class="uni-input" type="text" placeholder="选择所在省/市/区" />
                                    <!-- <image src="/static/right.png" class="rights"></image> -->
                <!-- </view> 
                                </view> -->

                <view class="input-wrapper" @tap="openPicker">
                    <view class="title-text">所在地区</view>
                    <view class="input selectcity">
                        <input placeholder="请选择省市区" disabled type="text" v-model="addressData.address" />
                        <!-- <image src="/static/right.png" class="rights"></image> -->
                    </view>
                </view>

                <!-- 省市区选择 province city area初始省市区设置 show:是否显示  @sureSelectArea：确认事件 @hideShow：隐藏事件-->
                <cc-selectCity @click="selected" :province="addressData.province" :city="addressData.city"
                    :area="addressData.area" :show="show" @changeClick="changeClick" @sureSelectArea="onsetCity"
                    @hideShow="onhideShow"></cc-selectCity>

                <view class="input-wrapper">
                    <view class="title-text"> 详细地址 </view><input id="uni-input-type-text"
                        v-model="addressData.addressDetail" class="uni-input" type="text" placeholder="请输入道路,小区,门牌号等" />
                </view>
            </uni-forms>

        </view>


        <button @click="submit"
            style="width:354rpx; height: 60rpx; background-color: red; margin: 234rpx auto; display: flex; align-items: center; justify-content: center; background-color:#1677FF; border-radius: 25rpx; color: white;">保存</button>
        <!-- <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="close"></u-picker> -->
        <!-- <u-picker :show="show" ref="uPickerRef" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="close"></u-picker> -->

    </view>



</template>

<script>
    // import address from "@/api/address.js";
    import address from "@/api/address.js";
    export default {
        data() {
            return {
                addressData: {
					userId:101,
                    name: "",
                    phone: "",
                    address: "", //请选择省市区
                    detail: "", //输入详细地址
                    isDefault: 1,
                    province: "", //省
                    city: "", //市
                    area: "", //区
                    provinceName: "",
                    cityName: "",
                    districtName: "",
                },
                show: false,
                isShow: true,
                saveOrEdit: true, //编辑或者保存
            };
        },
        onLoad(option) {
            console.log(option, "options");
            this.getAddList()
            
            if (option.id) {
                this.getAddressInfo(option.id);
                this.saveOrEdit = false; //编辑或保存为非
            } else {
                uni.setNavigationBarTitle({
                    title: "新建地址",
                });
                this.saveOrEdit = true; //编辑或保存为真
            }
        },
        methods: {
            selected(e) {
               
            },
            getAddList() {
                // console.log(666666)
                address.getAddressList().then((res) => {
                    // console.log(res)
                })
            },
            changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                if (columnIndex === 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    this.$refs.uPickerRef.setColumnValues(1, this.columnData[index])
                }
            },
            // 回调参数为包含columnIndex、value、values
            confirm(e) {
                
                this.show = false;
            },
            close() {
                this.show = false;
            },


            getAddressInfo(id) {
             
                address.getAddressById(id).then((res) => {
                   
                    //省市区
                    // console.log("address=>",address);

                    this.addressData.provinceName = res.data.province;
              
                    this.addressData.cityName = res.data.city;
                    this.addressData.districtName = res.data.district;
                    this.addressData = res.data;
                    this.addressData.address = res.data.province + res.data.city + res.data.district;
                 
                    return



           
                    res.data.provinceName = res.data.province;
                    res.data.cityName = res.data.city;
                    res.data.districtName = res.data.district;
                    this.address = res.data.province + res.data.city + res.data.district;
                    // res.data.area = res.data.district;
                 
                    // this.addressData = res.data;
                    // console.log("this.addressData", this.addressData);
                    // console.log("res.data", res.data);
                    // console.log(res, "==》res")
                });
            },
            submit() {
                this.addressData.district = this.addressData.area;
                if (this.saveOrEdit) { //如果编辑或保存为真
                    address.saveAddress(this.addressData).then((res) => {
                        if (res.code == 200) {
                            uni.showToast({
                                title: "保存成功！",
                                icon: "none",
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500);

                        }
                    });
                } else { //如果编辑或保存为非
                    address.updateAddress(this.addressData).then((res) => {
                        if (res.code == 200) {
                            uni.showToast({
                                title: "保存成功！",
                                icon: "none",
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500);
                        }
                    });
                }
            },
            openPicker() {
                this.show = true; //下拉遮罩层
            },

            changeClick(value, value2, value3, value4) {
                 // console.log("地址选择器 = " + value + value2 + value3);
				 console.log("地址选择器 = " ,value , value2 , value3,value4);
                // console.log("地址选择器44 = " + value4);
                // console.log("地址选择器44 = " + value5);
                // console.log("地址选择器44 = " + value6);
                // this.addressData.province = value;
                // this.addressData.city = value2;
                // this.addressData.area = value3;
            },
            onhideShow() {
                this.show = false;
            },
            //选中省市区
            onsetCity(e) {

                // console.log(e, 'eeeeeeeeee');
                let data = e.detail.target.dataset;
                let address = data.province + data.city + data.area;
                this.show = false;
                this.addressData.address = address;
            },
            switchChange(e) {
                // console.log("e----", e);
                if (e.addressDetail.value) {
                    this.addressData.isDefault = 0;
                } else {
                    this.addressData.isDefault = 1;
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .content-header {
        box-sizing: border-box;
        padding-left: 59rpx;


    }

    .select {
        position: absolute;
        right: 30rpx;
        top: 0rpx;
    }

    .title-name {
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
        margin: 32rpx 0;

    }


    .item-address {
        width: 398rpx;
        margin-left: 62rpx;
        color: #777777;

    }

    .selected-item {
        width: 100%;
        margin: 38rpx 0;
        font-size: 30rpx;
        position: relative;

    }

    .addAdress {
        color: #777777;
        display: flex;

    }

    .input-wrapper {
        display: flex;
        height: 40rpx;
        align-items: center;
        margin: 58rpx 0;

    }

    .title-text {
        width: 198rpx;
    }
</style> -->